3D - Touch（二）之Peek And Pop

发表于   |   分类于   |   阅读次数

前言

在介绍了前面的桌面的3D-Touch,这篇文章来介绍应用中使用peek & pop。 比如QQ 微信中消息界面重压cell就会出现peek & pop。接下来实现这一效果。

实现

创建视图(sourceView)

首先用tableview来做例子。用storyboard创建表,在这里就不赘述了。

1
var titleArray = ["3D-Touch Objective-C","3D-Touch Swift","前言快报:Swift终将超越OC,进而取代OC","Github9月编程语言 JS 跃居第一位"]

创建一个数组来做tableview的数据源。

实现代理

在实现这一效果之前,需要使当前的控制器实现UIViewControllerPreviewingDelegate代理并且要判断当前设备是否支持Peek & pop:

1
2
3
if traitCollection.forceTouchCapability == .available{
            registerForPreviewing(with: self, sourceView: tableView)
        }

代理中有两个方法:

1
public func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController?

第一个参数可以获取到要显示的是哪个目标view（sourceView）以及手势,其中有个属性（sourceRect）还可以控制那块区域展示出peek的效果

第二个参数location 顾名思义就是要控制能产生重压的区域。(与第一个参数的sourceRect不同,sourceRect只是哪片区域要展示peek效果,就是在屏幕中视图凸起的那一部分。如果不设置默认就是整个sourceView,而这个参数则是控制哪些区域能使用peek效果)。注意 “能” 和 “要”。
这个方法返回的是要显示的那个控制器,就是pop预览的那个控制器。

1
public func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController)

这个方法就是用来做跳转的。

开始实现代理方法

我们需要新建一个控制器来做pop效果,返回出这个控制器。

1
2
3
4
5
6
7
8
9
10
func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
    guard let indexPath = tableView.indexPathForRow(at:location) , let cell = tableView.cellForRow(at: indexPath) else {
        return nil
    }
    let detailVC  = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "detail") as! DetailViewController
    previewingContext.sourceRect = cell.frame
    detailVC.text = (cell.textLabel?.text)!
    return detailVC
    
}
1
2
3
4
    func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) {
//        self.show(viewControllerToCommit, sender: self)
        self.navigationController?.pushViewController(viewControllerToCommit, animated: true)
    }

show 和 push都能展示出相同的效果

在显示的控制器中设置代码

在detailviewcontroller中需要返回出pop向上拉的选项。（也可以不实现）另外要为了要展示出数据,我在该视图控制器中添加了一个textview来展示数据。

1
2
3
self.title = "详情"
self.automaticallyAdjustsScrollViewInsets = false
self.textView.text = text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
override var previewActionItems: [UIPreviewActionItem]{
       
       let action1 = UIPreviewAction.init(title: "喜欢", style: .default) { (UIPreviewAction, UIViewController) in 
       }
       
       let action2 = UIPreviewAction.init(title: "收藏", style: .default) { (UIPreviewAction, UIViewController) in
           
       }
       
       let cancle = UIPreviewAction.init(title: "取消", style: .default) { (UIPreviewAction, UIViewController) in
           
       }
       
       let delete = UIPreviewAction.init(title: "删除", style: .destructive) { (UIPreviewAction, UIViewController) in
           
       }
   
       let actionGroup = UIPreviewActionGroup.init(title: "删除", style: .destructive, actions: [cancle,delete])
       
       return [action1, action2 ,actionGroup]
   }

返回的数组中存的是UIPreviewAction。这个数组可以是个二维数组,所以可以展示出很多选项。例子中返回的就是一个二维数组。

最后

到此整个效果的代码都设置完了。接下来运行程序,看看我们的成果吧:

3D- Touch.gif